<template>
    <div class="pageMain">
        <div class="coursess">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">

                <div class="courses courses3" @click="showNewNav">
                    <Car v-for="item in useData.theHome" :name="item.name" :desc="item.currDesc" :img="item.iconPath"
                        :tename="item.designerNameList" :time1="item.startTeachingTime" :time2="item.finishTeachingTime"
                        :id="item.currNo" />
                </div>

            </el-tabs>
        </div><!----><textarea id="copyText" width="10px" height="10px"
            style="resize: none; position: fixed; top: -9999px;"></textarea>
    </div>
</template>

<script setup>
    import { ref, inject, onMounted } from 'vue';
    import { useRouter } from 'vue-router';
    import useDataStore from "@/stores/Data";
    import Car from "@/components/learning-plaza/cars.vue"

    // 使用 inject 钩子来获取通过 provide 提供的 showNavItem  
    const showNavItem = inject('showNavItem');

    // 使用 useRouter 钩子来获取路由实例  
    const router = useRouter();

    // 定义一个方法，用于导航到 '/front' 并显示导航项  
    const showNewNav = () => {
        router.push('/front/task');
        // 因为 showNavItem 本身就是一个 ref，所以直接设置其 value  
        if (showNavItem) {
            showNavItem.value = true;
        }
    };

    const useData = useDataStore();
    import { resHomeData } from '@/api/homes'

    onMounted(() => {
        useData.getHomeData()
    })

    const isExpanded = ref(false); // 使用 ref 创建一个响应式引用 
    const targetRotateDegrees = ref(0);

    function toggleExpansion() {
        isExpanded.value = !isExpanded.value; // 切换 isExpanded 的值 
        targetRotateDegrees.value = (targetRotateDegrees.value + 180) % 360;

    }
</script>

<style>
    .courses3 {
        margin-top: 10px;
    }

    .coursess_shadow {
        width: 1200px;
    }
</style>